import React, { Component } from 'react'


export default class Index extends Component {

    render() {
        let { list } = this.props;


        return (
            <div className="index">
                <header>
                    <h2>商品列表</h2>
                </header>
                <main>
                    {}

                    {
                        list.map((item, index) => {
                            return <li key={index}>

                                <img src={item.img} alt="" />
                                <p>{item.title}</p>
                                <p>
                                    {item.price}
                                </p>
                                <div>


                                    <button onClick={() => {
                                        if (item.num > 0) {
                                            item.num--;
                                        }

                                        this.props.setList(list);
                                    }} style={{ display: item.num ? 'inline' : 'none' }}>-</button>
                                    <span style={{ display: item.num ? 'inline' : 'none' }}>{item.num}</span>
                                    <button onClick={() => {
                                        item.num++;
                                        this.props.setList(list);
                                    }}>+</button>
                                </div>


                            </li>
                        })
                    }

                </main>

            </div>
        )
    }
}



